<!DOCTYPE html>
<!--[if lt IE 7]><html class="lt-ie9 lt-ie8 lt-ie7"><![endif]-->
<!--[if IE 7]><html class="lt-ie9 lt-ie8"><![endif]-->
<!--[if IE 8]><html class="lt-ie9"><![endif]-->
<!--[if gt IE 8]><!--><html><!--<![endif]-->
<head>
<title>Calisto | About</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/foundation.min.css">
<link rel="stylesheet" href="css/superfish.css">
<link rel="stylesheet" href="css/stylesheet.css">
<link href='http://fonts.useso.com/css?family=Quando' rel='stylesheet' type='text/css'>
<link href='http://fonts.useso.com/css?family=Droid+Sans:400,300' rel='stylesheet' type='text/css'>
<script src="js/vendor/custom.modernizr.js"></script>
<script>
Modernizr.load({
    // test if browser understands media queries
    test: Modernizr.mq('only all'),
    // if not load ie8-grid
    nope: 'css/ie8-grid-foundation-4.css'
});
</script>
<!--[if lt IE 9]>
<link rel="stylesheet" href="css/ie-fixes.css">
<![endif]-->
</head>
<body>
<div class="header">
  <div class="row">
    <div class="columns large-12">
      <div class="row header-inner">
        <div class="columns large-4 small-12"> <a href="index.html"><img src="images/logo.png" alt="" class="logo"></a> </div>
        <div class="columns large-8">
          <nav>
            <section>
              <ul class="sf-menu large-12">
                <li class="active"><a href="index.html">Home</a></li>
                <li><a href="about.html">About us</a></li>
                <li><a href="blog.html">Blog</a></li>
                <li><a href="gallery.html">Gallery</a></li>
                <li class="has-dropdown"><a href="services.html">Services</a>
                  <ul class="dropdown">
                    <li class="has-dropdown"><a href="#">Dropdown Level 1a</a>
                      <ul class="dropdown">
                        <li><a href="#">Dropdown Level 2a</a></li>
                        <li><a href="#">Dropdown Level 2b</a></li>
                      </ul>
                    </li>
                    <li><a href="#">Dropdown Level 1b</a></li>
                    <li><a href="#">Dropdown Level 1c</a></li>
                    <li><a href="#">Dropdown Level 1d</a></li>
                    <li><a href="#">See all &rarr;</a></li>
                  </ul>
                </li>
                <li><a href="contact.html">Contact Us</a></li>
              </ul>
            </section>
          </nav>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="columns large-12 small-top-menu">
      <div class="row">
        <div class="columns large-12 plr0 top-nav">
          <form name="dropdown" class="dropdown" action="#">
            <nav>
              <section>
                <select name="selected" id="target" accesskey="E" onChange="goToNewPage(document.dropdown.selected)">
                  <option value="index.html">home</option>
                  <option value="about.html">about us</option>
                  <option value="blog.html">blog</option>
                  <option value="gallery.html">gallery</option>
                  <option value="services.html">services</option>
                  <option value="contact.html">contact us</option>
                </select>
              </section>
            </nav>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="row content-wrapper">
  <div class="columns large-12">
    <div class="row wrapper">
      <div class="columns large-7 content">
        <h1 class="page-title">About Us</h1>
        <div>
          <h2 class="sub-title">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis</h2>
        </div>
        <ul class="row">
          <li class="columns large-4 about-list">
            <div class="img-wrapper">
              <p><img src="images/redwoman.jpg" alt="" class="th about-image"> 
            </div>
            </p>
            <h3 class="employer-name">Rebecca Traver</h3>
            <p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat porro voluptatem</p>
          </li>
          <li class="columns large-4  about-list">
            <div class="img-wrapper">
              <p><img src="images/man.jpg" alt="" class="th about-image"></p>
            </div>
            <h3 class="employer-name">NATHELIAN</h3>
            <p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat volupt porro atem</p>
          </li>
          <li class="columns large-4  about-list">
            <div class="img-wrapper">
              <p><img src="images/youngwoman.jpg" alt="" class=" th about-image"></p>
            </div>
            <h3 class="employer-name">Shamitha S Rao</h3>
            <p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat porro voluptatem</p>
          </li>
        </ul>
      </div>
      <div class="columns sidebar large-4 large-offset-1">
        <h1 class="page-title"> Our Acheivements </h1>
        <ul>
          <li> <a href="#">dolorem ipsum quia dolor sit amet</a> </li>
          <li> <a href="#">sed quia non numquam eius modi tempora </a> </li>
          <li> <a href="#">dolorem ipsum quia dolor sit amet</a> </li>
          <li> <a href="#">sed quia non numquam eius modi tempora </a> </li>
          <li> <a href="#">dolorem ipsum quia dolor sit amet</a> </li>
          <li> <a href="#">sed quia non numquam eius modi tempora </a> </li>
          <li> <a href="#">dolorem ipsum quia dolor sit amet</a> </li>
          <li> <a href="#">sed quia non numquam eius modi tempora </a> </li>
        </ul>
      </div>
    </div>
  </div>
</div>
<footer class="footer">
  <div class="row">
    <div class="columns large-12 footer-inner">
      <div class="row">
        <div class="columns large-4 useful-links">
          <div>
            <h2 class="footer-title">Quick links</h2>
            <ul class="footer-list">
              <li><a href="#">Home</a></li>
              <li><a href="#">About Us</a></li>
              <li><a href="#">Products</a></li>
              <li><a href="#">Gallery</a></li>
              <li><a href="#">Contact Us</a></li>
            </ul>
          </div>
        </div>
        <div class="columns large-4 contact">
          <div>
            <h2 class="footer-title">Contactus</h2>
            <ul class="footer-list">
              <li><span class="small-icon"><img src="images/address.png" alt=""></span>255, Willson Street,Caulfield, Melbourne</li>
              <li><span class="small-icon"><img src="images/phone.png" alt=""></span>Tel:(122)3456789, (121)3456079, (121)2341234</li>
              <li><span class="small-icon"><img src="images/fax.png" alt=""></span>(121)5647289, (122)34526589</li>
              <li><span class="small-icon"><img src="images/email.png" alt=""></span>email@domain.com</li>
              <li><span class="social-media"><a href="#">t</a></span><span class="social-media"><a href="#">f</a></span><span class="social-media"><a href="#">y</a></span><span class="social-media"><a href="#">g</a></span></li>
            </ul>
          </div>
        </div>
        <div class="columns large-4 about">
          <div>
            <h2 class="footer-title">Aboutus</h2>
            <p><img src="images/about.png" alt=""></p>
            <p>Placerat urna et tristique in! Scelerisque integer nisi pha sellus, nec phasellus arcualiquet etiam magna massa sit cursus adipiscing sed, nec? Aenean odio! Cumac dolor dapibus tincidunt lorem ipsum dolor sit esmet placerat urna et tristique in! Scelerisque integer nisi phasellus</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</footer>
<div class="credit-row">
  <div class="row">
    <div class="columns large-11 credit"> &copy; 2045 All rights reserved by <a href="#">Calisto.</a> More Templates <a href="http://www.cssmoban.com/" target="_blank" title="模板之家">模板之家</a> - Collect from <a href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a></div>
    <div class="columns large-1"> <img src="images/toparrow.png" alt="" class="scrollToTop"> </div>
  </div>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/hoverIntent.js"></script>
<script src="js/superfish.js"></script>
<script>
Modernizr.load({
    test: Modernizr.placeholder,
    nope: 'js/placeholder.min.js'
});
function goToNewPage() {
    if (document.getElementById('target').value) {
        window.location.href = document.getElementById('target').value;
    }
}
</script>
<script>
$(document).ready(function () {
    $('ul.sf-menu').superfish({
        animation: {
            height: 'show'
        },
        delay: 400
    });
    $("img.scrollToTop").click(function () {
        $("html, body").animate({
            scrollTop: 0
        }, "slow");
    });
});
</script>
</body>
</html>